<template>
  <div id="chargeMange">
      <!-- 搜索框 -->
      <div class="search-container">
        <!-- 下拉菜单 -->
        <el-select v-model="selectType" placeholder="请选择收费类型" style="width: 300px;margin-right: 22px;" @change="changeSelect">
          <el-option label="待收费" value="await"></el-option>
          <el-option label="已收费" value="already"></el-option>
        </el-select>
        <el-input style="width: 300px;margin-right: 22px;" v-model="formValue.name" placeholder="请输入患者姓名" ></el-input>
        <el-input style="width: 300px;" v-model="formValue.personId" placeholder="请输入患者身份证号" >
          <template #append>
            <el-button style="color: #FFFFFF;background-color: #3b82f6;" :icon="Search"  @click="searchOrder()"></el-button>
          </template>
        </el-input>
      </div>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-card shadow="never">
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%"  :row-class-name="tableRowClassName" :loading="loading">
        <el-table-column type="index" fixed="left" label="序号" width="60" align="center"></el-table-column>
        <el-table-column prop="type" label="订单类型" width="120" align="center">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.type === 'inspection'">检查单</el-tag>
            <el-tag type="primary" v-if="scope.row.type === 'prescription'">处方单</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" align="center"></el-table-column>
        <el-table-column prop="age" label="年龄" width="60" align="center"></el-table-column>
        <el-table-column prop="personId" label="身份证号" align="center"></el-table-column>
        <el-table-column prop="doctorName" label="接诊医生" width="120" align="center"></el-table-column>
        <el-table-column prop="updateTime" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="price" label="原价" width="100" align="center"></el-table-column>
        <el-table-column prop="insurancePrice" label="医保价格" width="100" align="center"></el-table-column>
        <el-table-column label="收费状态" align="center">
          <template #default="scope">
            <el-tag type="warning" v-if="scope.row.status === '10'">待收费</el-tag>
            <el-tag type="success" v-if="scope.row.status === '20'">医保支付</el-tag>
            <el-tag type="info" v-if="scope.row.status === '25'">普通支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template #default="scope">
            <!-- 待收费只显示普通收费和医保收费 -->
            <div v-if="scope.row.status === '10'">
              <el-button style="padding: 0" type="success" text size="small" @click="charge(scope.row)">普通收费</el-button>
              <el-button style="padding: 0" type="primary" text size="small" @click="insuranceCharge(scope.row)">医保收费</el-button>
            </div>
            <div v-else>
              <el-button style="padding: 0" type="primary" text size="small" @click="check(scope.row)">查看收费详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="margin:30px;float: right;">
        <el-pagination
            size="small"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 15, 20]"
            v-model:current-page="currentPage"
            v-model:page-size="currentSize"
            v-model:total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
      </el-card>
    <!-- 点击查看出现的弹框 一个渲染普通支付 一个渲染医保支付 -->
    <el-dialog v-model="dialogVisible" title="收费详情" width="50%" :before-close="handleClose">
      <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="订单类型">
          <el-tag type="primary" v-if="dialogForm.type === 'inspection'">检查单</el-tag>
          <el-tag type="primary" v-if="dialogForm.type === 'prescription'">处方单</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="姓名">
          {{ dialogForm.name }}
        </el-descriptions-item>
        <el-descriptions-item label="年龄">
          {{ dialogForm.age }}
        </el-descriptions-item>
        <el-descriptions-item label="身份证号">
          {{ dialogForm.personId }}
        </el-descriptions-item>
        <el-descriptions-item label="接诊医生">
          {{ dialogForm.doctorName }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ dialogForm.updateTime }}
        </el-descriptions-item>
        <el-descriptions-item label="原价">
          {{ dialogForm.price }}
        </el-descriptions-item>
        <el-descriptions-item label="医保价格">
          {{ dialogForm.insurancePrice }}
        </el-descriptions-item>
        <el-descriptions-item label="收费状态">
          <el-tag type="warning" v-if="dialogForm.status === '10'">待收费</el-tag>
          <el-tag type="success" v-if="dialogForm.status === '20'">医保支付</el-tag>
          <el-tag type="info" v-if="dialogForm.status === '25'">普通支付</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>


  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {Search} from "@element-plus/icons";
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";
import axios from "axios";

/*引入所需的icon*/

/*页面加载完毕执行*/
onMounted(()=>{
  console.log('♥收费管理页面加载完毕');
  searchOrder();
})

/*定义搜索框表单*/
const formValue = ref({
  type: '',
  name: '',
  personId: ''
})
/*定义加载动画*/
const loading = ref(false)
/*定义控制弹框显示的变量*/
const dialogVisible = ref(false)
/*定义弹框对象*/
const dialogForm = ref({
  name: '',
  age: '',
  personId: '',
  doctorName: '',
  updateTime: '',
  price: '',
  insurancePrice: '',
  status: ''
})
/*定义查看方法*/
const check = (row) => {
  console.log("点击收费管理页面-查看方法，查看参数为:{}", row);
  dialogVisible.value = true;
  dialogForm.value = row;
}
/*定义弹框关闭的方法*/
const handleClose = () => {
  console.log('Dialog close event');
  dialogVisible.value = false;
  dialogForm.value = {
    type: '',
    name: '',
    personId: ''
  }
}
/*定义原始表格数据*/
const originalTableData = ref([])

/*定义下拉菜单*/
const selectType = ref('')

/*改变下拉框 按照表格数据的状态更改表格数据*/
const changeSelect = () => {
  console.log("点击收费管理页面-下拉框更改事件");
  console.log("当前下拉框的值为：", selectType.value);
  filterTableData(); // 调用过滤方法
}

/*定义搜索方法*/
const searchOrder = () => {
  loading.value = true;
  console.log("点击收费管理页面-搜索方法，搜索参数为:{}", formValue.value);
  let data = qs.stringify(formValue.value);
  axios.get(TEST_URL + "/v1/order/find?" + data).then((res) => {
    if (res.data.code == 2001) {
      ElMessage({
        message: "搜索成功",
        type: "success"
      });
      console.log("搜索订单接口响应数据", res.data);
      originalTableData.value = res.data.data; // 保存原始数据
      filterTableData(); // 调用过滤方法
      loading.value = false;
    } else {
      ElMessage({
        message: res.data.data.message,
        type: "error"
      });
    }
  });
}

/*过滤表格数据*/
const filterTableData = () => {
  if (selectType.value === 'await') {
    tableData.value = originalTableData.value.filter(item => item.status === '10');
  } else if (selectType.value === 'already') {
    tableData.value = originalTableData.value.filter(item => item.status === '20' || item.status === '25');
  } else {
    tableData.value = originalTableData.value; // 如果没有选择任何选项，显示所有数据
  }
}

/*定义要传递的参数*/
const params = {}

/*定义普通收费*/
const charge = (row) => {
  ElMessageBox.confirm('您确定要收费吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    params.id = row.id;
    params.type = row.type;
    params.status = '25';
    params.price = row.price;
    console.log("普通收费接口参数", params);
    axios.post(TEST_URL + "/v1/order/pay", params).then((res) => {
      if (res.data.code == 2001) {
        ElMessage({
          message: "收费成功",
          type: "success"
        });
        console.log("收费接口响应数据", res.data);
        searchOrder();
      } else {
        ElMessage({
          message: res.data.data.message,
          type: "error"
        });
      }
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消'
    });
  })
}

/*定义医保收费*/
const insuranceCharge = (row) => {
  ElMessageBox.confirm('您确定要收费吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    params.id = row.id;
    params.type = row.type;
    params.status = '20';
    params.insurancePrice = row.insurancePrice;
    console.log("医保收费接口参数", params);
    axios.post(TEST_URL + "/v1/order/pay", params).then((res) => {
      if (res.data.code == 2001) {
        ElMessage({
          message: "收费成功",
          type: "success"
        });
        console.log("收费接口响应数据", res.data);
        searchOrder();
      } else {
        ElMessage({
          message: res.data.data.message,
          type: "error"
        });
      }
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消'
    });
  })
}

/*定义模拟的待收费表格数据*/
const tableData = ref([])

/*定义分页器参数*/
const currentPage = ref(1);
const currentSize = ref(5);
const total = ref(tableData.value.length);
const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  currentSize.value = val;
}
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  currentPage.value = val;
}

</script>

<style scoped>
/* 增加特异性 */
.el-table >>> .wait-charge {
  background-color: rgb(252.5, 245.7, 235.5) !important;
}

.el-table >>> .charge-success {
  background-color: rgb(239.8, 248.9, 235.3) !important;
}

.el-table >>> .charge-fail {
  background-color: #FAFAFA !important;
}
/**/
.dialogBox{
  .el-card__body{
    padding: 0 !important;
  }
}

</style>
